<template>
	<view class="info">
		<!-- S 顶部导航 -->
		<sol-navbar>
			<template v-slot:right>
				<image class="info-naver_right-icon" src="/static/icon-default/icon_more_spot.png" mode="scaleToFill">
				</image>
			</template>
		</sol-navbar>
		<!-- E 顶部导航 -->

		<!-- 用户信息 S -->
		<view class="info-box">
			<view class="info-box__left">
				<view class="info-box__left-user">
					<text class="info-box__left-user__name line-1">花轮先生花轮先生花轮先生花轮先生</text>
					<image class="info-box__left-user__gender" src="/static/icon-default/icon_male.png"
						mode="scaleToFill">
					</image>
				</view>
				<view class="info-box__left-banner">
					<text class="info-box__left-banner__vip">FANS</text>
					<text class="info-box__left-banner__text line-1">1212</text>
				</view>
				<view class="info-box__left-brief">
					喜欢我的情感故事，一定要订阅我，欢迎找我交流你的情感故事，希望你不要错过我。
				</view>
				<view class="info-box__left-option">
					<view class="info-box__left-option__btn" @click="fnSubscribeEvent">订 阅</view>
					<image class="info-box__left-option__icon" src="/static/icon-default/icon_chat.png"
						mode="scaleToFill">
					</image>
				</view>
			</view>
			<view class="info-box__right">
				<sol-avatar src="/static/icon-default/icon_logo.png" :size="200"></sol-avatar>
			</view>
		</view>
		<!-- 用户信息 S -->

		<!-- 动态内容 S -->
		<text class="info-content">动态内容 · 63篇</text>
		<view class="info-list">
			<dynamic-list-item v-for="dynaminc in dynamicList" :key="dynaminc.id" :info="dynaminc"
				@click="fnDynamincEvent">
			</dynamic-list-item>
			<!-- S 访问限制 -->
			<view class="info-see" @click="fnSeeEvent('open')">
				<image class="info-see_icon" src="/static/icon-default/icon_see.png" mode="scaleToFill"></image>
				<view class="info-see_box">
					<text class="info-see_title">查看所有动态内容</text>
					<text class="info-see_text">需要给予10块时间碎片/30天内任意查阅</text>
				</view>
			</view>
			<!-- E 访问限制 -->
		</view>
		<!-- 动态内容 E -->

		<!-- S 弹出访问限制 -->
		<sol-drawer v-model="see.open" title="访问限制" primary-text="愿意给予" cancel-text="取消" @click="fnSeeEvent">
			<template v-slot:default>
				<view class="see-drawer">
					<view class="see-drawer_price">需给予作者10块时间碎片</view>
					<view class="see-drawer_brief">
						<text>作者的话：</text>
						<text>喜欢我的文字，欢迎订阅我，我更新的时候可以第一时间看到，想要浏览过去的，就当请我吃杯咖啡吧！哈哈</text>
					</view>
				</view>
			</template>
		</sol-drawer>
		<!-- E 弹出套餐选择 -->


		<view class="safe-area-inset-bottom" style="height: 96rpx;"></view>
	</view>
</template>

<script>
	import {
		decodeParam
	} from "@/utils/function/codeParam.js"

	export default {
		name: "UserInfo",
		data() {
			return {
				// 动态列表
				dynamicList: Array.from({
					length: 2
				}, (v, i) => v = {
					id: i + 12,
					publishTime: `18时${i+10}分`,
					publishState: ["weather-night", "weather-rainy"][i % 2],
					content: "多数事并不如你想的那样一帆风顺，但你却因此成为了可以乘风破浪的人。" + i,
					user: {
						uid: i + 1,
						nickname: '凉凉',
						avatar: '/static/icon-default/icon_avatar.png',
					},
					imgs: i == 8 ? [] : ['/static/icon-default/icon_alipay.png',
						'https://dummyimage.com/200x200', '/static/icon-default/icon_logo.png', ,
						'/static/icon-default/icon_logo.png'
					].slice(0, i % 6),
					lifeTime: i + "小时",
					lifeState: "time-" + (i % 6 + 1),
					commentCount: Math.random().toString().slice(-3),
					audioTime: i == 8 ? 46 : 0,
					audioSrc: i == 8 ? '/staic/88s.aco' : null,
					type: 'dynamic',
					users: [],
				}),
				// 访问限制
				see: {
					open: false
				}
			};
		},
		computed: {},
		onLoad(opt) {
			if (opt && opt.id) {

			}
		},
		methods: {
			// 订阅点击事件
			fnSubscribeEvent() {
				this.$log(this.$options.name, 'fnSubscribeEvent');
			},
			// 动态内容卡片点击事件
			fnDynamincEvent(type = '', value = 0) {
				this.$log(this.$options.name, type, value);
			},
			// 访问限时点击事件
			fnSeeEvent(type = '', value = 0) {
				this.$log(this.$options.name, type, value);
				switch (type) {
					case 'open':
						this.see.open = true;
						break;
					case 'primary': // 确认
						uni.showToast({
							title: '好的',
							icon: 'none',
							success: () => {
								this.see.open = false;
							}
						})
						break;
					case 'mask': // 遮罩
					case 'cancel': // 关闭
						this.see.open = false;
						break;
				}
			}

		}
	}
</script>

<style lang="scss">
	.info {
		background-color: $--color-background;
		min-height: 100vh;

		// 顶部栏
		&-naver_right-icon {
			width: 56rpx;
			height: 44rpx;
			padding: 14rpx 28rpx 14rpx 24rpx;
			display: block;
			overflow: hidden;
		}

		&-box {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-start;
			padding: 0 28rpx;

			&__left {
				&-user {
					display: flex;
					align-items: center;

					&__name {
						width: 420rpx;
						font-size: 48rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #DDDDDD;
						display: block;
					}

					&__gender {
						width: 34rpx;
						height: 34rpx;
						display: block;
					}
				}

				&-banner {
					display: flex;
					align-items: center;
					width: 300rpx;
					background-image: linear-gradient(to right, #484e54 0%, #625d46 100%);
					border-radius: 14rpx;
					padding: 15rpx 20rpx;
					margin: 28rpx 0;

					&__vip {
						font-size: 28rpx;
						font-weight: bold;
						font-style: italic;
						color: #f2bf2f;
					}

					&__text {
						width: 200rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #F2BF2F;
						display: block;
						margin-left: 20rpx;
					}
				}

				&-brief {
					font-size: 28rpx;
					font-weight: 400;
					color: #BBBBBB;
					margin-bottom: 28rpx;
				}

				&-option {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;

					&__btn {
						font-size: 28rpx;
						letter-spacing: 4rpx;
						background-color: #474e54;
						margin-right: 28rpx;
						border-radius: 28rpx;
						padding: 14rpx 28rpx;
						color: #dddddd;
					}

					&__icon {
						width: 90rpx;
						height: 64rpx;
						display: block;
						background-color: #474e54;
						margin-right: 28rpx;
						border-radius: 28rpx;
					}
				}
			}

			&__right {}
		}

		// 动态内容
		&-content {
			font-size: 32rpx;
			font-weight: 400;
			color: #DDDDDD;
			padding-left: 28rpx;
			padding-top: 48rpx;
			padding-bottom: 28rpx;
			display: block;
		}

		&-list {
			padding: 0 28rpx;
		}

		// 访问限制提示块
		&-see {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;
			background-color: #474e54;
			padding: 28rpx;
			border-radius: 28rpx;

			&_icon {
				height: 88rpx;
				width: 88rpx;
			}

			&_box {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				margin-left: 28rpx;
			}

			&_title {
				font-size: 32rpx;
				font-weight: 400;
				color: #DDDDDD;
				margin-bottom: 8rpx;
			}

			&_text {
				font-size: 28rpx;
				font-weight: 400;
				color: #878787;
			}
		}
	}

	// 弹出访问限制
	.see-drawer {
		padding: 14rpx 12rpx 28rpx;

		&_price {
			font-size: 32rpx;
			font-weight: 400;
			color: #DDDDDD;
			text-align: center;
			letter-spacing: 4rpx;
			padding-bottom: 28rpx;
		}

		&_brief {
			padding: 28rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #BBBBBB;
			background-color: #576069;
			border-radius: 12rpx;
			letter-spacing: 4rpx;
		}
	}
</style>
